<template>
	<view class="order-repaymentCard">
		<view class="title-text">更换银行卡</view>
		<view class="font-s-12" style="color: rgba(255,255,255,0.56);">请按照以下步骤进行绑定银行卡操作</view>
		<view class="handle-card-item flex-between-center" style="margin-top: 60rpx;">
			<view class="flex-align-center">
				<static-image src="/pagesA/static/img/applyFor/icon-sqbk.png" width="48" height="48" margin-right="16"></static-image>
				<view class="font-s-16 fw-b">1.申请绑卡</view>
			</view>
			<view class="flex-align-center" v-if="info.fourAuthentication===1">
				<view class="auth-success">已完成</view>
			</view>
			<view class="flex-align-center" @click="toFirst()" v-else>
				<view class="auth-orange">去绑卡</view>
				<static-image src="/static/img/common/arrow-right-orange.png" width="24" height="24" margin-left="6"></static-image>
			</view>
		</view>
		<view class="handle-card-item flex-between-center">
			<view class="flex-align-center">
				<static-image src="/pagesA/static/img/applyFor/icon-qrbk.png" width="48" height="48" margin-right="16"></static-image>
				<view class="font-s-16 fw-b">2.确认绑卡</view>
			</view>
			<view class="flex-align-center" @click="toSecond()" v-if="info.secondFourAuthentication===1">
				<view class="auth-success">已完成</view>
			</view>
			<view class="flex-align-center" @click="toSecond()" v-else>
				<view class="auth-orange">去确认</view>
				<static-image src="/static/img/common/arrow-right-orange.png" width="24" height="24" margin-left="6"></static-image>
			</view>
		</view>
		<view class="color-999 mar-t-20">
			<view class="">绑卡说明：</view>
			<view class="mar-t-10">1、个人银行卡仅限支持1类卡，请先确认卡类型。</view>
			<view class="mar-t-5">2、请先确认，卡是您本人，并且已经开通银联支付。</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{}
			}
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail(){
				this.$request({
					url: '/loginUserInfo/getDetail',
					method: 'get',
				}).then(res => {
					this.info = res.data
				})
			},
			toFirst(){
				uni.navigateTo({
					url: '/pagesA/applyFor/bankCard'
				})
			},
			toSecond(){
				if(this.info.fourAuthentication===1){
					uni.navigateTo({
						url: '/pagesA/applyFor/bankCard'
					})
				}else{
					this.$u.toast('请先完成第一步申请')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-repaymentCard {
		background-image: url('../static/img/applyFor/repaymentCard-header-bg.png');
		background-size: 100% 414rpx;
		background-repeat: no-repeat;
		padding: 80rpx 24rpx 24rpx;
		background-position: 0 -50rpx;
		.title-text{
			font-size: 40rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}
		.handle-card-item{
			width: 100%;
			height: 176rpx;
			background: linear-gradient( 180deg, #F5F9FF 0%, #FFFFFF 100%);
			border-radius: 24rpx;
			border: 4rpx solid #FFFFFF;
			margin-top: 24rpx;
			padding: 0 24rpx;
			.auth-success{
				padding: 0 8rpx;
				height: 40rpx;
				border-radius: 8rpx;
				border: 1rpx solid #16B877;
				color: #16B877;
				font-size: 24rpx;
				font-weight: initial;
				text-align: center;
				line-height: 38rpx;
			}
			.auth-orange{
				padding: 0 8rpx;
				height: 40rpx;
				border-radius: 8rpx;
				border: 1rpx solid #FF6933;
				color: #FF6933;
				font-size: 24rpx;
				font-weight: initial;
				text-align: center;
				line-height: 38rpx;
			}
		}
	}
</style>
